<template>
    <n-grid :cols="12" item-responsive responsive="screen">
        <n-gi span="12 m:8 l:6" offset="0 m:2 l:3">
            <n-card>
                <n-space vertical>
                    <template v-for="(question) in studentExamInfo['questionList']">
                        <n-card>
                            <n-space vertical>
                                <!-- 标题 -->
                                <n-space>
                                    <n-tag v-if="question['type'] == 4" type="warning" size="small">
                                        {{ questionValueKey[question['type']] }}
                                        ( {{ question['score'] + '分' }} )
                                    </n-tag>
                                    <n-tag v-else size="small">
                                        {{ questionValueKey[question['type']] }}
                                        ( {{ question['score'] + '分' }} )
                                    </n-tag>
                                    {{ question.title }}
                                </n-space>
                                <!-- 内容 -->
                                <n-space>
                                    <div v-html='question.content'>
                                    </div>
                                </n-space>
                                <!-- 选项 -->
                                <n-space vertical>
                                    <n-space>
                                        <template v-if="question.type == 0">
                                            <n-radio-group v-model:value="question['answer'][0]" disabled
                                                name="radiogroup">
                                                <n-space vertical>
                                                    <n-radio v-for="option in question.realOptions" :key="option.value" readonly
                                                        :value="option.value">
                                                        {{ option.label }}
                                                    </n-radio>
                                                </n-space>
                                            </n-radio-group>
                                        </template>
                                        <template v-if="question.type == 1">
                                            <n-checkbox-group v-model:value="question['answer']" readonly disabled>
                                                <n-space vertical>
                                                    <n-checkbox v-for="option in question.realOptions"
                                                        :value="option.value" :label="option.label" readonly>

                                                    </n-checkbox>
                                                </n-space>
                                            </n-checkbox-group>
                                        </template>
                                        <template v-if="question.type == 2">
                                            <n-radio-group :value="question['answer'] == true ? 'true' : 'false'" 
                                                name="radiogroup" disabled>
                                                <n-space>
                                                    <n-radio key="true" value="true">
                                                        正确
                                                    </n-radio>
                                                    <n-radio key="false" value="false">
                                                        错误
                                                    </n-radio>
                                                </n-space>
                                            </n-radio-group>
                                        </template>
                                        <template v-if="question.type == 3">
                                            <n-input v-model:value="question['answer']" disabled>
                                            </n-input>
                                        </template>
                                        <template v-if="question.type == 4">
                                            <n-card>
                                                <!-- {{studentAnswer[question.QID.toString()]['answer']}} -->
                                                <!-- <QuillEditor :options="EditorOptions"
                                                v-model:content="question['answer']"
                                                style="height: 250px" class="quillEditor" /> -->
                                                <div v-html='question.answer'>
                                                </div>
                                            </n-card>
                                        </template>
                                    </n-space>
                                    <n-space>
                                        <div :ref="(el) => { itemRefs[question.QID.toString()] = el }"
                                            v-if="question.type != 4" style="width:300px;height:200px">

                                        </div>
                                    </n-space>
                                </n-space>
                            </n-space>
                        </n-card>
                    </template>
                </n-space>

            </n-card>
        </n-gi>
    </n-grid>
</template>
<script lang='ts' setup>

import { nextTick, onMounted, reactive, ref } from "vue";
import { getQuestionCount } from '@/api/teacher/exam';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import * as echarts from 'echarts';

const questionValueKey = {
    0: '单选',
    1: '多选',
    2: '判断',
    3: '填空',
    4: '简答'
}


const props = defineProps({
    EID: {
        required: true
    },
});

const studentExamInfo: any = ref({
    questionList: {}
});

const itemRefs: any = ref({});

onMounted(async () => {
    studentExamInfo.value = await getQuestionCount({ EID: props.EID });
    for (let questionKey in studentExamInfo.value['questionList']) {
        if (studentExamInfo.value['questionList'][questionKey]['type'] == 0 || studentExamInfo.value['questionList'][questionKey]['type'] == 1) {
            studentExamInfo.value['questionList'][questionKey]['realOptions'] = [];
            for (let optionKey in studentExamInfo.value['questionList'][questionKey]['options']) {
                studentExamInfo.value['questionList'][questionKey]['realOptions'].push({
                    label: studentExamInfo.value['questionList'][questionKey]['options'][optionKey].content,
                    value: studentExamInfo.value['questionList'][questionKey]['options'][optionKey].key
                })
            }
            console.log(studentExamInfo.value['questionList'][questionKey]['realOptions']);
        }


    }
    await nextTick(
        () => {
            console.log(itemRefs.value);
            console.log('updt');
            for (let questionKey in studentExamInfo.value['questionList']) {
                if (studentExamInfo.value['questionList'][questionKey]['type'] != 4) {
                    let data: any = [];
                    for (let countKey in studentExamInfo.value['questionList'][questionKey]['count']) {
                        let value:any = countKey;
                        if(value == "true" || value == "false"){
                            value=value=="true"?"回答正确":"回答错误";
                        }else{
                            value = Number(countKey);
                            value=String.fromCharCode(value+65);
                        }
                        data.push({
                            value: studentExamInfo.value['questionList'][questionKey]['count'][countKey],
                            name: value
                        })
                    }
                    console.log(data);
                    let dt = echarts.init(itemRefs.value[studentExamInfo.value['questionList'][questionKey]['QID'].toString()]);
                    option.series[0].data = data;
                    dt.setOption(option);
                }
            }
        }
    )

});


const option = reactive({
    title: {
    text: '回答统计',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
    series: [
        {
            name: '人数',
            type: 'pie',
            radius: '50%',
            data: [
            ],
        }
    ]
});

</script>